<!--  -->
<template>
  <div class="">
    <el-button type="primary" @click="handleAddModel">添加模块</el-button>
    <el-table :data="List" style="width: 100%;margin-top:30px;" border="" stripe>
      <el-table-column align="center" label="模块名" width="220">
        <template slot-scope="scope">
          <template v-if="scope.row.temp_edit">
            <el-input v-model="scope.row.name" class="edit-input" size="small"/>
          </template>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="描述" width="220">
        <template slot-scope="scope">
          <template v-if="scope.row.temp_edit">
            <el-input v-model="scope.row.description" class="edit-input" size="small"/>
          </template>
          <span v-else>{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <template v-if="scope.row.temp_edit">
            <el-button
              size="mini"
              type="success"
              icon="el-icon-circle-check-outline"
              @click="saveRowEvent(scope.row)"
            >保存</el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-refresh"
              @click="cancelRowEvent(scope.$index,scope.row)"
            >取消</el-button>
          </template>
          <template v-else>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="editRowEvent(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="removeRowEvent(scope.row)"
            >删除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog  width="35%" :visible.sync="dialogVisible" title="编辑模块权限">
      <el-form :model="ModelData" label-width="80px" label-position="left">
        <el-form-item label="模块名">
          <el-input v-model="ModelData.name" placeholder="模块名"/>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="ModelData.description"
            :autosize="{ minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="描述"
          />
        </el-form-item>
        <el-form-item label="接口">
          <el-transfer
            v-model="role.roleValue"
            :data="role.roleData"
            :titles="['所有接口', '模块接口']"
            :button-texts="['删除', '添加']"
            filterable
            @change="handleChange"
            :render-content="renderContent"
          ></el-transfer>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmRole">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  getModelsLikeModelName,
  getUrls,
  getUrlsByModel,
  updateModelUrls,
  addModel
} from "@/api/manage";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      List: [],
      ModelData: {},
      dialogVisible: false,
      checkStrictly: false,
      role: {
        roleData: [],
        roleValue: []
      },
      addValue: [],
      delValue: []
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleAddModel() {
      this.List.unshift({ temp_edit: true });
    },
    getAllUrls() {
      this.role.roleData = [];
      getUrls().then(response => {
        //所有接口
        for (let index = 0; index < response.body.length; index++) {
          this.role.roleData.push({
            key: response.body[index].url,
            label: response.body[index].name,
            description: response.body[index].description
          });
        }
      });
      getUrlsByModel(this.ModelData.guid).then(response => {
        //模块所属接口
        this.role.roleValue = [];
        let urlKey = response.body.urls;
        for (let index = 0; index < urlKey.length; index++) {
          this.role.roleValue.push(urlKey[index].url);
        }
      });
    },
    getModels() {
      getModelsLikeModelName().then(response => {
        this.List = response.body;
        this.List = this.List.map(v => {
          this.$set(v, "temp_edit", false);
          return v;
        });
      });
    },
    saveRowEvent(row) {
      addModel(row).then(response => {
        this.getModels();
      });
    },
    renderContent(h, option) {
      return (
        <el-popover
          placement="right"
          title={option.label}
          width="200"
          trigger="hover"
          content={option.description}
        >
          <span slot="reference">{option.label}</span>
        </el-popover>
      );
    },
    //编辑行事件
    editRowEvent(row) {
      this.dialogVisible = true;
      this.ModelData = row;
      console.log(row.guid);
      this.getAllUrls();
    },
    handleChange(value, direction, movedKeys) {
      let keyData = this.role.roleData.map(role => role.key);
      if (direction === "left") {
        for (let index = 0; index < movedKeys.length; index++) {
          if (keyData.includes(movedKeys[index])) {
            this.delValue.push(movedKeys[index]);
          }
          this.addValue = this.addValue.filter(
            item => item != movedKeys[index]
          );
        }
      } else {
        for (let index = 0; index < movedKeys.length; index++) {
          if (keyData.includes(movedKeys[index])) {
            this.addValue.push(movedKeys[index]);
          }
          this.delValue = this.delValue.filter(
            item => item != movedKeys[index]
          );
        }
      }
    },
    cancelRowEvent(index, row) {
      this.List.splice(index, 1);
    },
    confirmRole() {
      const data = {
        addUrls: this.addValue,
        delUrls: this.delValue,
        modelGuid: this.ModelData.guid
      };
      updateModelUrls(data).then(response => {
        if (response.code === 100) {
          this.getAllUrls();
        }
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getModels();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>